import { Table } from "antd";
import React, { useEffect, useState } from "react";
import { useModel } from "umi";
import { useAntdColumnResize } from "react-antd-column-resize";

export default () => {
  const data = useModel("@@initialState");
  console.log(data);

  const [columns, setColumns] = useState<any>([
    {
      title: "columns1",
      dataIndex: "columns1",
      key: "columns1",
      width: 200,
      align: "center"
    },
    {
      title: "columns2",
      dataIndex: "columns2",
      key: "columns2",
      width: 200,
      align: "center"
    },
    {
      title: "columns3",
      dataIndex: "columns3",
      key: "columns3",
      width: 200,
      align: "center"
    }
  ]);

  const { resizableColumns, components }: any = useAntdColumnResize(() => {
    return { columns, minWidth: 100 };
  }, []);

  return (
    <div>
      <br />
      <br />
      <div
        style={{
          width: resizableColumns.reduce((t: number, { width }: { width: number }) => (t += width), 0),
          maxWidth: "60vw"
        }}
      >
        <Table
          bordered
          columns={resizableColumns}
          components={components}
          scroll={{ x: "max-content", y: "none" }}
          dataSource={[
            { columns1: "111", columns2: "222", columns3: "333" },
            { columns1: "111", columns2: "222", columns3: "333" }
          ]}
        />
      </div>
    </div>
  );
};
